<blockquote class="layui-elem-quote">
    <div class="layui-inline">
        <button id="createButton" class="layui-btn layui-btn-small layui-btn-primary">
            <i class="layui-icon">&#xe608;</i>添加用户
        </button>
    </div>
    <div class="layui-inline">
        <button id="removeButton" class="layui-btn layui-btn-small layui-btn-primary">
            <i class="layui-icon">&#xe640;</i>批量删除
        </button>
    </div>
</blockquote>
<table id="userTable" lay-filter="userTable"></table>
<script type="text/html" id="toolbar">
    <a class="layui-btn layui-btn-mini" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-mini" lay-event="edit-info">信息</a>
    <a class="layui-btn layui-btn-mini" lay-event="edit-password">密码</a>
    <a class="layui-btn layui-btn-mini" lay-event="edit-permission">权限</a>
</script>
<#include "/shared/style.ftl" />
<#include "/shared/javascript.ftl" />
<script type="text/javascript">
    var table, element;
    var tableOption = layuiManager.getTableOption('userTable', '#userTable', '${baseUrlAdmin}/user/listAjax', [[
        {checkbox: true},
        {field: 'id', title: 'ID', width: 80, align: 'center'},
        {field: 'userId', title: '用户ID', width: 280, align: 'center'},
        {field: 'roleName', title: '角色', width: 100, align: 'center'},
        {field: 'token', title: 'Token', width: 280, align: 'center'},
        {field: 'name', title: '昵称', width: 100, align: 'center'},
        {field: 'email', title: '邮箱', width: 200, align: 'center'},
        {field: 'permission', title: '权限', width: 150, align: 'center'},
        {field: 'type', title: '类型', width: 100, align: 'center'},
        {field: 'status', title: '状态', width: 100, align: 'center'},
        {title: '操作', fixed: 'right', width: 200, align: 'center', toolbar: '#toolbar'}
    ]]);
    layui.use(['table', 'element'], function () {
        element = layui.element;
        table = layui.table;
        table.render(tableOption);
        //监听工具条
        table.on('tool(userTable)', function (object) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = object.data; //获得当前行数据
            var layEvent = object.event; //获得 lay-event 对应的值
            var tr = object.tr; //获得当前行 tr 的DOM对象
            var index = tr.data('index');
            var tds = tr.find('td');
            var userId = tds.eq(2).text();
            if (layEvent === 'detail') { //查看
                console.log('查看 第' + index + '行');
                var titles = ['ID', '用户ID', '角色', 'Token', '昵称', '邮箱', '权限', '类型', '状态'];
                var ulNode = '<ul>';
                $.each(titles, function (index, item) {
                    ulNode += '<li>{0}:{1}</li>'.format(item, tds.eq(index + 1).text());
                });
                ulNode += '</ul>';
                parent.layuiLayer.open({title: '查看', content: ulNode, area: 'auto', maxWidth: 500});
            } else if (layEvent === 'del') { //删除
                parent.layuiLayer.confirm('真的删除行么', function (index) {
                    object.del();
                    layer.close(index);
                });
            } else if (layEvent === 'edit-info') { //修改用户信息
                console.log('编辑 第' + index + '行');
                layuiManager.parentCreateTab('${baseUrlAdmin}/user/editInfo?userId={0}'.format(userId), layuiTabConfig.userEditInfo);
            } else if (layEvent === 'edit-password') { //修改用户密码
                layuiManager.parentCreateTab('${baseUrlAdmin}/user/editPassword?userId={0}'.format(userId), layuiTabConfig.userEditPassword);
            } else if (layEvent === 'edit-permission') { //修改用户权限
                layuiManager.parentCreateTab('${baseUrlAdmin}/user/editPermission?userId={0}'.format(userId), layuiTabConfig.userEditPermission);
            }
        });

    });

    $('#createButton').on('click', function (e) {
        <#--layuiManager.parentCreateTab('${baseUrlAdmin}/user/add', layuiTabConfig.userCreate);-->

        var index = layui.layer.open({
            title : "添加用户",
            type : 2,
            content : "${baseUrlAdmin}/user/add",
            success : function(layero, index){
                setTimeout(function(){
                    layui.layer.tips('点击此处返回友链列表', '.layui-layer-setwin .layui-layer-close', { tips: 3 });
                },500)
            }
        });
        $(window).resize(function(){ layui.layer.full(index); });
        layui.layer.full(index);
    });

    $('#removeButton').on('click', function (e) {
        var checkStatus = table.checkStatus('userTable');
        if (checkStatus.data === undefined || checkStatus.data.length === 0) {
            parent.layuiLayer.alert('最低选中一行');
            return false;
        }
        var confirmMessage = checkStatus.isAll ? '确定要全部删除吗' : '确定要删除吗';
        parent.layuiLayer.confirm(confirmMessage, function (index) {
            var idArray = [];
            $.each(checkStatus.data, function (index, item) {
                idArray.push(item.id);
            });
            $.post('${baseUrlAdmin}/user/remove', {idArray: idArray.join(',')}, function (data) {
                if (typeof(data) === 'string') {
                    parent.layuiLayer.alert(data, '没有权限');
                    return false;
                }
                if (data.code === 0) {
                    table.reload('userTable', tableOption);
                } else {
                    layer.alert(data.message);
                }
            });
            parent.layuiLayer.close(index);
        });
    });
</script>